<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.clear:after {
				clear: both;
				content: '';
				display: block;
				height: 0;
			}
			
			#div1 {
				background-color: gainsboro;
				position: relative;
			}
			
			#img1 {
				display: block;
				float: left;
			}
			
			#div1 #u1 {
				float: right;
			}
			
			#u1 li {
				list-style-type: none;
				float: left;
				margin-right: 30px;
			}
			
			#u1 img {
				display: none;
			}
			
			#u1 li:hover img {
				display: inline;
			}
			
			#div2 {
				position: absolute;
				right: 10px;
				top: 30px;
				width: 220px;
				border: 1px solid lightgray;		
			}
			#u2 ul {
				margin-top: 10px;
				border: 1px solid gainsboro;
			}
			
			#div2 li {
				margin: 5px;
				display: inline-block;
			}
			#u1 li #u2{
				display: none;
			}
			#u1 li:hover #u2{
				display: block;
			}
		</style>
	</head>

	<body>
		<div id="nav">
			<div id="div1" class="clear">
				<img id="img1" src="img/logo.gif" />
				<ul id="u1" class="clear">
					<li id="li1">购物车 <img src="img/open_icon.gif" /></li>
					<li id="li2">优惠券 <img src="img/open_icon.gif" /></li>
					<li id="li3">快速注卡 <img src="img/open_icon.gif" /></li>
					<li id="li4">各地购课 <img src="img/open_icon.gif" /></li>
					<li id="li5">手机报 <img src="img/open_icon.gif" /></li>
					<li id="li6">
						网站导航 <img src="img/open_icon.gif" />
						<div id="div2">
							<ul id="u2">
								<li>
									<ul id="u21">
										<li>托福</li>
										<li>雅思</li>
										<li>考研</li>
										<li>职称英语</li>
										<li>初中</li>
										<li>日语</li>
									</ul>
								</li>
								<li>
									<ul id="u22">
										<li>网络课堂</li>
										<li>资讯中心</li>
										<li>知识堂</li>
										<li>大师讲坛</li>
										<li>学习论坛</li>
										<li>学词</li>
										<li>考研搜校</li>
									</ul>
								</li>
								<li>
									<ul id="u23">
										<li>M-Zone</li>
										<li>手机报</li>
										<li>时时英语</li>
									</ul>
								</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>

</html>